<template>
  <div>
    <vant-navbar :title="'修改' + title"></vant-navbar>
    <div class="main">
      <template v-if="title == '头像'">
        <van-uploader
          v-model="fileImage"
          :multiple="true"
          :before-read="beforeRead"
          :after-read="afterRead"
          :before-delete="delUploadImg"
          upload-icon="plus"
          :max-count="1"
          preview-size="150"
        />
        <van-button size="small" type="primary" @click="uploadImg"
          >保&nbsp;&nbsp;存</van-button
        >
      </template>
      <template v-else>
        <van-field v-model="value" input-align="center">
          <template #button>
            <van-button size="small" type="primary" @click="keep"
              >保&nbsp;&nbsp;存</van-button
            >
          </template>
        </van-field>
      </template>
    </div>
  </div>
</template>

<script>
import VantNavbar from "@/components/VantNavbar.vue";
import { changeDetail } from "@/api/request/sedMessage.js";

export default {
  components: { VantNavbar },
  data() {
    return {
      fileImage: [],
      title: this.$route.params.title,
      value: this.$route.params.value,
      id: this.$store.state.userDetail.id,
      uploadUrl: "/api/upload/fileUpload",
    };
  },
  created() {
    // console.log(this.$route.params.title, this.$route.params.value);
    // console.log(this.$store.state.userDetail.id);
  },
  methods: {
      // 返回布尔值
    beforeRead(file) {
      console.log('beforeRead===', file);
      if (file instanceof Array) {
        //判断是否是数组
        file.forEach((v) => {
          this.checkFile(v);
        });
      } else {
        this.checkFile(file);
      }
      return true;
    },
    //图片类型检查
    checkFile(file) {
      console.log('checkFile==---', file);
      const format = ["jpg", "png", "jpeg"];
      const index = file.name.lastIndexOf(".");
      const finalName = file.name.substr(index + 1);
      if (!format.includes(finalName.toLowerCase())) {
        Toast("请上传" + format.join(",") + "格式图片");
        return false;
      }
    },
    afterRead(file) {
      console.log('afterRead==~~~', file);
    // 此时可以自行将文件上传至服务器
      if (file instanceof Array) {
        file.map((v) => {
          v.status = "uploading";
          v.message = "上传中...";
          this.uploadImg(v);
        });
      } else {
        file.status = "uploading";
        file.message = "上传中...";
        this.uploadImg(file);
      }
    },
    //上传
    uploadImg(file) {
      const formData = new FormData();
      formData.append("file", file.file);
      var par = {
        id: this.id,
        headImg: this.uploadUrl,
      };
      console.log(par);
      // changeDetail(par).then(res => {
      //   if(res.data.code === 200) {
      //     console.log(res);
      //     alert('成功')
      //   }
      // }).catch(err => {
      //   this.$notify({
      //       type: "warning",
      //       message: "上传失败",
      //     });
      // })
    },


    keep() {
      if (this.title == "昵称") {
        var par = {
          id: this.id,
          nickname: this.value,
        };
      }
      if (this.title == "性别") {
        var par = {
          id: this.id,
          sex: this.value,
        };
      }
      if (this.title == "地址") {
        var par = {
          id: this.id,
          addressCity: this.value,
        };
      }
      console.log(par);
      // changeDetail(par).then(res => {
      //   if(res.data.code === 200) {
      //     console.log(res);
      //     alert('修改成功')
      //   }
      // }).catch(err => {
      //   alert(err);
      // })
    },
  },
};
</script>

<style>
.main {
  margin-top: 50px;
}
</style>